{% extends 'ApiCloud/Base/layout.common.html.twig' %}

{% block main %}
    <div class="">
        <div id="header" style="" class="pos-r bcf">
            <div class="c11 tac fs10 flrc">
                <div class="pad5 pos-r fs12">
                    <span class="fa fa-angle-left padr10 op9"></span>
                    <mu-ripple @click="goback()"></mu-ripple>
                </div>
                <div class="flex1 tal pad10 tac">位置拾取器</div>
                <mu-button @click="pickBack()" flat color="success"><span class="fwb">拾取</span></mu-button>
            </div>
        </div>
    </div>
    {#    <div id="box" class="pos-r" style=" overflow-y: scroll" :style="'margin-top:  ' + boxT + 'px;height: ' + boxH + 'px;'">#}
    <div id="box" class="pos-r" style=" overflow-y: scroll" :style="'margin-top:  ' + boxT + 'px'">
        <div id="" class=" pos-r">
            <div class="padl5 padr5 pos-f bcf l0 r0 tac">
                <mu-text-field :change="getNearBy()" label="位置搜索" placeholder="如：总公司、分公司、站点等" v-model="name"
                               full-width></mu-text-field>
            </div>
            <div class="">
                <div class="padl5 padr5" style="visibility: hidden">
                    <mu-text-field :change="getNearBy()" label="位置搜索" placeholder="如：总公司、分公司、站点等" v-model="name"
                                   full-width></mu-text-field>
                </div>
                <div class="scrollX-Box bcf">
                    <div class="scrollX-Item mar3 fs8 c12" v-if="isTrue(tags)">猜您在找：</div>
                    <div class="scrollX-Item mar3" v-if="isTrue(tags)" v-for="item in tags">
                        <mu-chip color="grey600" @click="search(item)"><span class="fs7">[[item]]</span></mu-chip>
                    </div>
                </div>
                <div>
                    <div class="flrc lh15 pad5 bdbda mar5 pos-r" v-for="item in list">
                        <div class="flex1">
                            <div>[[item.city]] - [[item.name]]</div>
                            <div class="fs8 c12">[[item.address]]</div>
                        </div>
                        <mu-ripple @click="setPos(item)"></mu-ripple>
                    </div>
                </div>
            </div>
        </div>
    </div>
{% endblock %}
{% block myJs %}
{#    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Kiuik0qMrnwy3tBNzXLZzIGyH59eh6Rm"></script>#}
    <script src="{{ root }}/js/baidumap.js"></script>
    <script>
        function getPosInfo(lat, lon, func) {
            var point = new BMap.Point(lon, lat);
            var geoc = new BMap.Geocoder();
            geoc.getLocation(point, function (res) {
                func(res)
            });
        }
    </script>
{% endblock %}
